<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:mo="https://gitee.com/aun/tentime"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      >
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
    <style type="text/css">
    	:focus {outline: -webkit-focus-ring-color auto 0px !important;}
	    .more-container {display: none;}
	    .layui-col-lg1 { width: 80px!important;}
		.layui-table-view {margin: 0px 0px !important;}
		.layui-form-item {margin-bottom: 0px!important;}
		.layui-form-label {padding: 5px 0px!important; width: 60px!important; text-align: left!important;}
    </style>
</head>
<body style="overflow-y: hidden;">
<form class="layui-form" action="" id="search_form">
 <div class="layui-col-md12">
 	<div class="layui-card"><div class="layui-card-body"><div class="layui-form-item">
	 	<div class="layui-fluid">
	       <div class="layui-row">
	         <div class="layui-col-lg3 layui-col-md4 layui-col-sm6">
	           <div class="layui-inline">
	             <label class="layui-form-label">工号</label>
	             <div class="layui-input-inline">
	               <input type="text" name="user_no" class="layui-input" id="user_no" placeholder="请选择工号">
	             </div>
	           </div>
	         </div>
	         <div class="layui-col-lg3 layui-col-md4 layui-col-sm6">
	           <div class="layui-inline">
	             <label class="layui-form-label">姓名</label>
	             <div class="layui-input-inline">
	               <input type="text" name="user_name" class="layui-input" id="user_name" placeholder="请选择姓名">
	             </div>
	           </div>
	         </div>
	         <div class="layui-col-lg3 layui-col-md4 layui-col-sm6">
	           <div class="layui-inline">
	             <label class="layui-form-label">角色名称</label>
	             <div class="layui-input-inline">
	               <input type="text" name="role_name" class="layui-input" id="role_name" placeholder="请输入短信内容">
	             </div>
	           </div>
	         </div>
	         <div class="more-container">
	           <div class="layui-col-lg3 layui-col-md4 layui-col-sm6">
	             <div class="layui-inline">
	               <label class="layui-form-label">角色类型</label>
	               <div class="layui-input-inline">
	                 <input type="text" name="role_type" class="layui-input" id="role_type" placeholder="请输入手机号码">
	               </div>
	             </div>
	           </div>
	           <div class="layui-col-lg3 layui-col-md4 layui-col-sm6">
	             <div class="layui-inline">
	               <label class="layui-form-label">创建人</label>
	               <div class="layui-input-inline">
	                 <input type="text" name="create_by_name" class="layui-input" id="create_by_name" placeholder="请输入手机号码">
	               </div>
	             </div>
	           </div>
	          <!-- 
	           <div class="layui-col-lg3 layui-col-md4 layui-col-sm6">
	             <div class="layui-inline">
	               <label class="layui-form-label">创建时间</label>
	               
	               <div class="layui-inline" id="create_date">
			        <div class="layui-input-inline">
			          <input type="text" autocomplete="off" id="startDate" class="layui-input" placeholder="开始日期">
			        </div>
			        <div class="layui-form-mid">-</div>
			        <div class="layui-input-inline">
			          <input type="text" autocomplete="off" id="endDate" class="layui-input" placeholder="结束日期">
			        </div>
			       </div>
	               
	             </div>
	           </div>
	             -->
	         </div>
	         
	        <div class="layui-col-lg1 layui-col-md1 layui-col-sm2 layui-col-xs3">
	            <button class="layui-btn layui-btn-primary layui-btn-sm" lay-submit="" lay-filter="search"><i class="layui-icon layui-icon-search"></i>查询</button>
	        </div>
	        <div class="layui-col-lg1 layui-col-md1 layui-col-sm2 layui-col-xs3">
	            <button class="layui-btn layui-btn-primary layui-btn-sm" lay-submit="" lay-filter="reset"><i class="layui-icon layui-icon-refresh"></i>重置</button>
	        </div>
	        <div class="layui-col-lg1 layui-col-md1 layui-col-sm2 layui-col-xs3">
	            <button class="layui-btn layui-btn-primary layui-btn-sm more-btn" type="button" onclick="more_click('myTable');" lay-filter="more"><i class="layui-icon layui-icon-addition"></i>展开</button>
	        </div>
	        
	       </div>
	    </div></div></div>
		<table id="myTable" lay-filter="myTable"></table>
		<script type="text/html" id="bar">
        	<a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i> 修改</a>
        	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i> 删除</a>
    	</script>
     </div>
  </div>
  
</form>
 
<script th:replace="/common/template :: common"></script>
<script th:inline="javascript">
    // layui文档 : http://www.layui.com/doc/
    layui.use(['form', 'soulTable', 'table', 'laydate'], function () {
        var form = layui.form,
            table = layui.table,
            laydate = layui.laydate,
            soulTable = layui.soulTable;
		/*
        laydate.render({
            elem: '[name=create_date]',
            range: true
        });
		*/
        /* 渲染主表格*/
        var myTable = table.render({
            id: 'myTable'
            ,elem: '#myTable'
            ,url: ctx + '/buz/committee/listSoulTable'
            ,method: 'post'
            ,contentType: 'application/json'
            ,height: 'full-50'// $(document).height() - $('#myTable').offset().top //
            ,toolbar: '<div><a class="layui-btn layui-btn-sm" lay-event="export"><i class="layui-icon layui-icon-download-circle"></i>导出所有数据</a><a class="layui-btn layui-btn-sm layui-btn-normal" lay-event="export2"><i class="layui-icon layui-icon-download-circle"></i>导出勾选数据</a></div>'
            //,sort: 'user_no'
            ,page: true
            ,limits: [20, 30, 50, 100, 200]
            ,limit: 20 //默认采用20
            ,cols: [
                [
                {type: 'numbers', title: '序号', fixed: 'left'},
            	{type: 'checkbox', fixed: 'left'},
                {field: 'user_no', title: '工号', width: 100, sort: true, filter: true},
                {field: 'user_name', title: '姓名', width: 200, sort: true, filter: true},
                {field: 'role_name', title: '角色名称', width: 150, sort: true, filter: true},
				{field: 'role_type', title: '角色类型', width: 150 , filter: true},
				{field: 'create_by_name', title: '创建人', width: 123, filter: true},
				{field: 'create_date', title: '创建时间', width: 112, sort:true, filter: false},
                {title: '操作', width: 156, templet: '#bar',fixed: 'right'}
				]
            ]
			, filter: {
				//用于控制表头下拉显示，可以控制顺序、显示, 依次是：表格列、筛选数据、筛选条件、编辑筛选条件、导出excel,其中page=true时data过滤有问题
				//items:['column','data','condition','editCondition','excel'] //用于控制表头下拉显示，可以控制顺序、显示
				//items:['column','condition','editCondition','excel'] //用于控制表头下拉显示，可以控制顺序、显示
				items:['column','condition','excel'] //用于控制表头下拉显示，可以控制顺序、显示
				//items:['column','data','condition','excel'] //用于控制表头下拉显示，可以控制顺序、显示
				//items:['column','excel'] //用于控制表头下拉显示，可以控制顺序、显示
				,bottom: false //隐藏工具栏帅选条件
			}
            , done: function (res, curr, count) {
                // 如果有使用到下拉筛选，这句话必须要
                soulTable.render(this)
            }
        });
		
		laydate.render({
		    elem: '#create_date'
		    ,range: ['#startDate', '#endDate']
		});
		
		form.on('submit(search)', function (data) {
			search(data, myTable);
			return false;
		});
        // 导出
        form.on('submit(export)', function (data) {
        	soulTable.export(myTable);
        	return false;
		})

        // 修改和删除
        table.on('tool(myTable)', function(obj) {
            var data = obj.data; // 获得当前行数据
            if (obj.event === 'del') {
                layer.open({
                    title: '删除',
                    content: JSON.stringify(data)
                })
            } else if (obj.event === 'edit') {
                layer.open({
                    title: '修改',
                    content: JSON.stringify(data)
                })
            }
        });

        // 获取选中数据
        $('[data-type=getCheckData]').on('click', function () {
            var checkStatus = table.checkStatus('myTable')
                ,data = checkStatus.data; //选中行数据
            layer.alert(JSON.stringify(data), {title: '勾选数量: '+checkStatus.data.length} );
            return false;
        });
	
	    /*
	    window.onresize = function () {//执行
	    	//table_resize('myTable');
	    	return false;
        }
        */
    });
    
</script>
</body>
</html>